<template>
  <custom-modal-page :visible.sync="visible">
    <div
      class="flowPath-config-add-container animate__faster animate__animated animate__fadeIn"
    >
      <div class="header" :header="id ? '编辑' : '新增'">
        <a-button class="back-button" @click="gotoBack()"> 返回 </a-button>
      </div>
      <div class="main" v-loading="loading">
        <a-form-model ref="form" :model="form" :rules="rules">
          <a-collapse v-model="activeKey">
            <a-collapse-panel key="1" :show-arrow="false" title="节点信息">
              <template slot="header">
                <div class="collapse-custom-header">
                  {{ activeKey.includes("1") ? "收起" : "展开" }}
                  <div
                    class="icon"
                    :class="[activeKey.includes('1') && 'active']"
                  >
                    <bj-icon-font
                      type="xl"
                      color="#0068B7"
                      :size="10"
                    ></bj-icon-font>
                  </div>
                </div>
              </template>
              <div class="node-container">
                <a-row :gutter="0">
                  <a-col :span="8">
                    <!-- 当前节点名称 -->
                    <a-form-model-item label="当前节点名称" prop="name">
                      <a-input
                        v-model="form.name"
                        placeholder="请输入当前节点名称"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="8">
                    <!-- 可打回节点 -->
                    <a-form-model-item label="可打回节点">
                      <a-select
                        placeholder="请选择可打回节点"
                        :loading="backNodeLoading"
                        allowClear
                        v-model="form.backnode"
                      >
                        <a-select-option
                          :value="item.id"
                          v-for="item in backNodeSource"
                          :key="item.id"
                        >
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="8">
                    <!-- 节点类型 -->
                    <a-form-model-item label="节点类型" prop="nodetype">
                      <a-select
                        placeholder="请选择节点类型"
                        v-model="form.nodetype"
                      >
                        <a-select-option
                          :value="item.key"
                          v-for="item in nodeTypeSource"
                          :key="item.key"
                        >
                          {{ item.label }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <!-- 备注 -->
                    <a-form-model-item label="备注">
                      <a-input
                        placeholder="请输入备注"
                        type="textarea"
                        v-model="form.remark"
                        :rows="4"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
            </a-collapse-panel>
          </a-collapse>
          <div class="form-add-container">
            <div class="form-title" header="表单添加"></div>
            <div
              class="form-container"
              v-for="(item, index) in form.flowFormList"
              :key="index"
            >
              <div class="sort">
                <div class="index" header="●">表单（{{ index + 1 }}）</div>
                <div class="delete" @click="deleteData(index)">删除</div>
              </div>
              <div
                class="content"
                :class="{ 'default-bg': index != form.flowFormList.length - 1 }"
              >
                <a-row :gutter="20">
                  <!-- 组件类型 -->
                  <a-col :span="6">
                    <a-form-model-item label="组件类型">
                      <a-select
                        placeholder="请选择组件类型"
                        allowClear
                        :loading="formLoading"
                        v-model="item.elementType"
                      >
                        <a-select-option
                          :value="v.dicValue"
                          v-for="v in formSource"
                          :key="v.dicValue"
                        >
                          {{ v.dicDesc }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <!-- 元素名称 -->
                  <a-col :span="6">
                    <a-form-model-item label="元素名称">
                      <a-input
                        v-model="item.elementName"
                        placeholder="请输入元素名称"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 是否必填 -->
                  <a-col :span="6">
                    <a-form-model-item label="是否必填">
                      <a-select
                        v-model="item.elementRequired"
                        placeholder="请选择是否必填"
                        allowClear
                      >
                        <a-select-option value="0"> 必填 </a-select-option>
                        <a-select-option value="1"> 非必填 </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <!-- 编辑时能否修改 -->
                  <a-col :span="6">
                    <a-form-model-item label="编辑时能否修改">
                      <a-radio-group v-model="item.isEditable">
                        <a-radio :value="0"> 能 </a-radio>
                        <a-radio :value="1"> 否 </a-radio>
                      </a-radio-group>
                    </a-form-model-item>
                  </a-col>
                  <!-- 上传最大数量 -->
                  <a-col
                    :span="6"
                    v-if="
                      item.elementType == 3 ||
                      item.elementType == 4 ||
                      item.elementType == 5
                    "
                  >
                    <a-form-model-item label="上传最大数量">
                      <a-input
                        v-model="item.maxLength"
                        placeholder="请输入上传最大数量"
                        type="number"
                      />
                    </a-form-model-item>
                  </a-col>
                  <template
                    v-if="item.elementType == 1 || item.elementType == 2"
                  >
                    <!-- 字段类型 -->
                    <a-col :span="6">
                      <a-form-model-item label="字段类型">
                        <a-select
                          placeholder="请选择字段类型"
                          v-model="item.fieldContentType"
                          allowClear
                        >
                          <a-select-option value="number">
                            数字
                          </a-select-option>
                          <a-select-option value="text"> 文本 </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <!-- 字段最大长度 -->
                    <a-col :span="6">
                      <a-form-model-item label="字段最大长度">
                        <a-input
                          v-model="item.maxLength"
                          placeholder="请输入字段最大长度"
                          type="number"
                        />
                      </a-form-model-item>
                    </a-col>
                  </template>
                  <template
                    v-if="
                      item.elementType == 1 ||
                      item.elementType == 2 ||
                      item.elementType == 7
                    "
                  >
                    <!-- 提示文字 -->
                    <a-col :span="12">
                      <a-form-model-item label="提示文字">
                        <a-input
                          v-model="item.placeHolder"
                          placeholder="请输入提示文字"
                        />
                      </a-form-model-item>
                    </a-col>
                    <!-- 字段单位 -->
                    <a-col :span="6">
                      <a-form-model-item label="字段单位">
                        <a-input
                          v-model="item.fieldUnit"
                          placeholder="请输入字段单位"
                        />
                      </a-form-model-item>
                    </a-col>
                    <!-- 是否需要默认值 -->
                    <a-col :span="6">
                      <a-form-model-item label="是否需要默认值">
                        <a-radio-group v-model="item.isDefalut">
                          <a-radio :value="1"> 是 </a-radio>
                          <a-radio :value="0"> 否 </a-radio>
                        </a-radio-group>
                      </a-form-model-item>
                    </a-col>
                    <!-- 默认值 -->
                    <a-col :span="6" v-if="item.isDefalut == '1'">
                      <a-form-model-item label="默认值">
                        <a-input
                          v-model="item.defalutValue"
                          placeholder="请输入默认值"
                        />
                      </a-form-model-item>
                    </a-col>
                  </template>
                  <!-- 下拉框数据列表 -->
                  <a-col :span="24" v-if="item.elementType == 7">
                    <a-form-model-item label="下拉框数据列表">
                      <a-row :gutter="20">
                        <a-col
                          :span="6"
                          v-for="(v, i) in item.selectDataSource"
                          :key="i + 's'"
                        >
                          <a-row :gutter="[10, 10]">
                            <a-col :span="20">
                              <a-input
                                v-model="v.label"
                                placeholder="请输入下拉框数据列表"
                              />
                            </a-col>
                            <a-col :span="3">
                              <div
                                v-if="item.selectDataSource.length - 1 != i"
                                style="
                                  cursor: pointer;
                                  font-size: 14px;
                                  color: var(--primary-color);
                                "
                                @click="deleteSelectData(index, i)"
                              >
                                删除
                              </div>
                              <bj-icon-font
                                v-else
                                style="cursor: pointer"
                                type="xinzengzijiedian"
                                color="#0068B7"
                                :size="24"
                                @click="addSelectData(index, i)"
                              >
                              </bj-icon-font>
                            </a-col>
                          </a-row>
                        </a-col>
                      </a-row>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="add-data" @click="addData()">添加表单</div>
          </div>
        </a-form-model>
        <div class="footer">
          <a-button type="default" @click="gotoBack()"> 取消 </a-button>
          <a-button type="primary" @click="save()" :loading="buttonLoading">
            提交
          </a-button>
        </div>
      </div>
    </div>
  </custom-modal-page>
</template>

<script>
import { notificationTip } from "@/utils";
import {
  getFormList,
  getBackNodeList,
  saveOrEditNode,
  getNodeDetail,
} from "@/api/user-center/flowPathConfig.js";
export default {
  data() {
    return {
      loading: false,
      activeKey: ["1"],
      form: {
        //当前节点名称
        name: "",
        //可打回节点
        backnode: undefined,
        //节点类型
        nodetype: undefined,
        //备注
        remark: "",
        //表单添加
        flowFormList: [
          {
            //组件类型
            elementType: undefined,
            //元素名称
            elementName: "",
            //是否必填
            elementRequired: undefined,
            //提示文字
            placeHolder: "",
            //字段内容类型
            fieldContentType: undefined,
            //字段最大长度
            maxLength: "",
            //字段单位
            fieldUnit: "",
            //否需要默认值 0否 1是
            isDefalut: 0,
            //默认值(若是下拉框则为下拉框的value)
            defalutValue: "",
            //下拉框数据列表
            selectDataSource: [{ value: 1, label: "" }],
            //编辑时能否修改 0能 1否
            isEditable: 0,
          },
        ],
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入当前节点名称",
            trigger: "blur",
          },
        ],
        nodetype: [
          {
            required: true,
            message: "请选择节点类型",
            trigger: "change",
          },
        ],
      },
      //表单下拉框
      formSource: [],
      formLoading: false,
      //可打回节点
      backNodeSource: [],
      backNodeLoading: false,
      //节点类型
      nodeTypeSource: [
        {
          key: 1,
          label: "开始节点",
        },
        {
          key: 2,
          label: "运行节点",
        },
        {
          key: 3,
          label: "结束节点",
        },
      ],
      buttonLoading: false,
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
    workflowid: {
      type: [String, Number],
      default: "",
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getFormList();
          this.getBackNodeList();
          if (this.id) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    //详情
    getDetail() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        getNodeDetail({ id: this.id })
          .then((res) => {
            let {
              data: { result },
            } = res;
            let flow = result?.flowFormList || [];
            this.form = {
              //当前节点名称
              name: result.name,
              //可打回节点
              backnode: result.backnode ? result.backnode : undefined,
              //节点类型
              nodetype: result.nodetype,
              //备注
              remark: result.remark,
              flowFormList: [],
            };
            flow.forEach((item) => {
              this.form.flowFormList.push({
                //组件类型
                elementType: item.elementType
                  ? Number(item.elementType)
                  : undefined,
                //元素名称
                elementName: item.elementName,
                //是否必填
                elementRequired: item.elementRequired
                  ? item.elementRequired
                  : undefined,
                //提示文字
                placeHolder: item.placeHolder,
                //字段内容类型
                fieldContentType: item.fieldContentType
                  ? item.fieldContentType
                  : undefined,
                //字段最大长度
                maxLength: item.maxLength,
                //字段单位
                fieldUnit: item.fieldUnit,
                //否需要默认值 0否 1是
                isDefalut: item.isDefalut,
                //默认值(若是下拉框则为下拉框的value)
                defalutValue: item.defalutValue,
                //下拉框数据列表
                selectDataSource: item.selectDatas
                  ? JSON.parse(item.selectDatas)
                  : [{ value: 1, label: "" }],
                //编辑时能否修改 0能 1否
                isEditable: item.isEditable,
              });
            });

            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //提交
    save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.buttonLoading = true;
          let id = this.id;
          let workflowid = this.workflowid;
          let { form } = this;
          let formJson = {
            //当前节点名称
            name: form.name,
            //可打回节点
            backnode: form.backnode ? form.backnode : "",
            //节点类型
            nodetype: form.nodetype,
            //备注
            remark: form.remark,
            workflowid,
            flowFormList: [],
          };
          form.flowFormList.forEach((item) => {
            formJson.flowFormList.push({
              //组件类型
              elementType: item.elementType ? item.elementType : "",
              //元素名称
              elementName: item.elementName,
              //是否必填
              elementRequired: item.elementRequired ? item.elementRequired : "",
              //提示文字
              placeHolder: item.placeHolder,
              //字段内容类型
              fieldContentType: item.fieldContentType
                ? item.fieldContentType
                : "",
              //字段最大长度
              maxLength: item.maxLength,
              //字段单位
              fieldUnit: item.fieldUnit,
              //否需要默认值 0否 1是
              isDefalut: item.isDefalut,
              //默认值(若是下拉框则为下拉框的value)
              defalutValue: item.defalutValue,
              //下拉框数据列表
              selectDatas: JSON.stringify(item.selectDataSource),
              //编辑时能否修改 0能 1否
              isEditable: item.isEditable,
            });
          });
          let msg = "节点新增成功！";
          if (id) {
            formJson.id = id;
            msg = "节点编辑成功！";
          }
          saveOrEditNode(formJson)
            .then((res) => {
              notificationTip("success", msg);
              this.$parent.getTableData();
              this.gotoBack();
            })
            .catch((_) => {})
            .finally((_) => {
              this.buttonLoading = false;
            });
        }
      });
    },

    //查询表单-下拉框
    getFormList() {
      this.formLoading = true;
      return new Promise((resolve, reject) => {
        getFormList()
          .then((res) => {
            this.formSource = res?.data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.formSource = [];
            reject();
          })
          .finally((_) => {
            this.formLoading = false;
          });
      });
    },

    //查询可打回节点-下拉框
    getBackNodeList() {
      this.backNodeLoading = true;
      return new Promise((resolve, reject) => {
        let id = this.id;
        let workflowid = this.workflowid;
        getBackNodeList({
          id,
          workflowid,
        })
          .then((res) => {
            this.backNodeSource = res?.data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.backNodeSource = [];
            reject();
          })
          .finally((_) => {
            this.backNodeLoading = false;
          });
      });
    },
    //新增下拉框数据列表
    addSelectData(index, i) {
      this.form.flowFormList[index].selectDataSource.push({
        value: i + 1 + 1,
        label: "",
      });
    },
    //删除下拉框数据列表
    deleteSelectData(index, i) {
      this.form.flowFormList[index].selectDataSource.splice(i, 1);
    },
    //新增数据
    addData() {
      this.form.flowFormList.push({
        //组件类型
        elementType: undefined,
        //元素名称
        elementName: "",
        //是否必填
        elementRequired: undefined,
        //提示文字
        placeHolder: "",
        //字段内容类型
        fieldContentType: undefined,
        //字段最大长度
        maxLength: "",
        //字段单位
        fieldUnit: "",
        //否需要默认值 0否 1是
        isDefalut: 0,
        //默认值(若是下拉框则为下拉框的value)
        defalutValue: "",
        //下拉框数据列表
        selectDataSource: [{ value: 1, label: "" }],
        selectDatas: "",
        //编辑时能否修改 0能 1否
        isEditable: 0,
      });
    },
    //删除数据
    deleteData(index) {
      this.form.flowFormList.splice(index, 1);
    },
    //返回
    gotoBack() {
      this.form = {
        //当前节点名称
        name: "",
        //可打回节点
        backnode: undefined,
        //节点类型
        nodetype: undefined,
        //备注
        remark: "",
        //表单添加
        flowFormList: [
          {
            //组件类型
            elementType: undefined,
            //元素名称
            elementName: "",
            //是否必填
            elementRequired: undefined,
            //提示文字
            placeHolder: "",
            //字段内容类型
            fieldContentType: undefined,
            //字段最大长度
            maxLength: "",
            //字段单位
            fieldUnit: "",
            //否需要默认值 0否 1是
            isDefalut: 0,
            //默认值(若是下拉框则为下拉框的value)
            defalutValue: "",
            //下拉框数据列表
            selectDataSource: [{ value: 1, label: "" }],
            //编辑时能否修改 0能 1否
            isEditable: 0,
          },
        ],
      };
      this.$refs.form.resetFields();
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
.flowPath-config-add-container {
  height: 100%;
  padding: 10px 0 10px 10px;
  .flex();
  flex-direction: column;
  .header {
    padding: 11px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f3f4f6;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
    .back-button {
      color: var(--primary-color);
      background: #f1f2f7 !important;
      border: none;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    .flex();
    flex-direction: column;

    /deep/.ant-collapse {
      border-radius: 0;
      border: none;
      background: #fff;
      .ant-collapse-item {
        display: flex;
        flex-direction: column;
        position: relative;
        border: none;
        border-bottom: 1px solid #e8ebf0;
        &::before {
          position: absolute;
          left: 30px;
          top: 20px;
          content: attr(title);
          font-size: 14px;
          color: #525a5d;
        }
        .ant-collapse-content-box {
          padding: 0;
        }
        .ant-collapse-header {
          padding: 0;
          margin-left: auto;
          margin-right: 30px;
          border-radius: 0;
          height: 60px;
          .flex();
          align-items: center;
          .collapse-custom-header {
            color: var(--primary-color);
            .flex();
            .icon {
              transform: scale(0.75);
              margin-left: 4px;
              transition: 0.3s;
              &.active {
                transform: scale(0.75) rotate(180deg);
              }
            }
          }
        }
        .ant-collapse-content {
          border: none;
        }
      }
    }
    //节点信息
    .node-container {
      padding: 0 80px 10px 20px;
    }
    /deep/.ant-form-item {
      .flex();
      .ant-form-item-label {
        width: 130px;
        flex-shrink: 0;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        textarea {
          height: 80px;
        }
        .ant-calendar-picker {
          width: 100%;
        }
      }
    }
    //表单添加
    .form-add-container {
      .flex();
      flex-direction: column;
      .form-title {
        margin: 20px 30px;
        &::before {
          content: attr(header);
          font-size: 14px;
          color: #525a5d;
        }
      }
      .form-container {
        box-sizing: border-box;
        padding: 0 30px 10px 30px;
        .sort {
          .flex();
          justify-content: space-between;
          align-items: center;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: var(--primary-color);
          .index {
            font-size: 16px;
            &::before {
              content: attr(header);
              margin-right: 10px;
            }
          }
          .delete {
            cursor: pointer;
            font-size: 14px;
          }
        }
        .content {
          border: 1px solid #e0e0e0;
          box-sizing: border-box;
          padding: 20px 50px 0 20px;
          margin: 14px 0;
          /deep/.ant-form-item {
            .ant-form-item-label {
              width: 120px;
            }
          }
        }
        .default-bg {
          background: #f6f9ff;
          border: none;
        }
      }
      .add-data {
        margin: 10px 30px 30px 30px;
        cursor: pointer;
        height: 36px;
        background: rgba(55, 89, 160, 0.1);
        border: 1px dashed var(--primary-color);
        border-radius: 4px;
        .flex();
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: var(--primary-color);
      }
      .add-select {
        cursor: pointer;
        height: 36px;
        background: rgba(55, 89, 160, 0.1);
        border: 1px dashed var(--primary-color);
        border-radius: 4px;
        .flex();
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: var(--primary-color);
      }
    }
    .footer {
      border-top: 2px solid #f3f4f6;
      padding: 20px 0;
      .flex();
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
